<template>
  <div class="page">
    <div
      class="page-text"
      v-for="(item, index) in allArr"
      :key="index"
      v-show="!allArr.length == 0"
    >
      <div class="page-title" @click="GoDelive()">
        <p>商品描叙</p>
        <img src="../assets/Shipment/jiantou.png" alt="" />
      </div>
      <div class="text">
        <img src="" alt="" />
        <div>
          <p>{{ item.cusName }}</p>
          <p>
            <span style="color: #999999; font-size: 14px">下单时间</span>
            {{ item.orderTime }}
          </p>
          <p>
            <span style="color: #999999; font-size: 14px">下单人</span>
            {{ item.orderUserName }}
          </p>
        </div>
      </div>
      <div class="btn">
        <button
          class="btn1"
          v-if="item.status == 0"
          @click="hdclick(item.serialNo, item.status)"
        >
          发货
        </button>
        <button
          class="btn2"
          v-else-if="item.status == 10"
          @click="hdclick(item.serialNo, item.status)"
        >
          收货
        </button>
        <button
          class="btn3"
          v-else-if="item.status == 20"
          @click="hdclick(item.serialNo, item.status)"
        >
          评价
        </button>
        <button
          class="btn4"
          v-else
          @click="hdclick(item.serialNo, item.status)"
        >
          查看评价
        </button>
      </div>
    </div>
    <div class="img" v-show="allArr.length == 0">
      <img src="../assets/Shipment/暂无消息.png" width="200px" alt="" />
      <div>暂无消息</div>
    </div>
    <van-overlay v-show="show">
      <div class="wrapper">
        <div class="block">
          <p>是否确认收货？</p>
          <div>
            <button @click="show = !show">取消</button>
            <button @click="shouhuo">确定收货</button>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { Confirm } from "../request/api";
export default {
  data() {
    return {
      show: true,
      serialNo: "",
    };
  },
  props: ["allArr", "ifshow"],
  created() {},
  methods: {
    hdclick(serialNo, status) {
      this.serialNo = serialNo;
      if (status == 0) {
        this.$router.push({
          path: "/deliverGoods",
          query: {
            serialNo: serialNo,
          },
        });
      }
      if (status == 10) {
        this.show = !this.show;
      }
      if (status == 20) {
        this.$router.push({
          path: "/evaluateInfo",
          query: {
            serialNo: serialNo,
            ifshow:true
          },
        });
      }
      if(status==30){
         this.$router.push({
          path: "/evaluateInfo",
          query: {
            serialNo: serialNo,
            ifshow:false
          },
        });
      }
    },
    shouhuo() {
      this.show = !this.show;
      location.reload()
      Confirm({
        serialNo: this.serialNo,
      }).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.page {
  padding: 10px 0;
  box-sizing: border-box;
  margin-bottom: 10px;
  .page-text {
    margin-bottom: 10px;
  }
  .page-title {
    height: 50px;
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e5e5;
  }
  .text {
    padding: 10px 0;
    overflow: hidden;
    width: 100%;
    background-color: #fff;
    padding: 0 10px;
    box-sizing: border-box;
    div {
      p {
        margin-bottom: 8px;
      }
    }
  }
  .btn {
    height: 60px;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #e5e5e5;
    button {
      float: right;
      margin: 10px;
      border: 0;
      width: 100px;
      height: 40px;
      border-radius: 40px;
    }
    .btn1 {
      color: #fff;
      background-color: #003399;
    }
    .btn2 {
      border: 1px solid #003399;
      background-color: #fff;
      color: #003399;
    }
    .btn3 {
      background-color: #ffcc33;
      color: #fff;
    }
    .btn4 {
      border: 1px solid #ffcc33;
      background-color: #fff;
      color: #ffcc33;
    }
  }
}
.img {
  width: 201px;
  height: 181px;
  margin: 150px auto;
  text-align: center;
  color: #ccc;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 250px;
  height: 136px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  p {
    text-align: center;
    padding: 41px;
  }
  div {
    button {
      width: 50%;
      border: 0;
      background-color: #fff;
      border-top: 1px solid #ccc;
      padding: 10px 0;
    }
    :nth-of-type(2) {
      border-left: 1px solid #ccc;
      color: skyblue;
    }
  }
}
</style>